<!-- **
    * @description checkbox 复选框组件
** -->
<!-- **
    * @use 无需引入直接使用 <yfn-checkbox v-model="value" :options="[]" @change="checkChange"></yfn-checkbox>
          eg: <yfn-checkbox v-model="value" :options="[{label: '文本', value: 1}]" @change="checkChange"></yfn-checkbox>
          eg插槽: <template #label="{ props }"></template>
    * @params参数说明：
    * @params {v-model/value}          绑定值
    * @params {options}                选项数据 Array
    * @params {options-key}            选项数据键值对 Object，eg：{label: 'title'}
    * @params {max}                    支持最多选中的数量
    * @params {disabled}               是否禁用，默认 false
    * @params {...}                    继承 a-checkbox-group 原生属性/事件
** -->
<!-- **
    * @params {options}                选项数据
    * @params {options.label}          文案
    * @params {options.value}          选项的 value
    * @params {options.disabled}       是否禁用，默认 false
    * @params {options.visible}        选项是否显示，默认 true
    * @params {options.indeterminate}  是否为半选状态，默认 false
    * @params {...}                    继承 a-checkbox 原生属性
** -->
<!-- **
    * @events事件：
    * @change                          值改变时触发
    * @get-instance                    获取实例
    * @{...}                           继承 a-checkbox-group 原生事件
** -->
<!-- **
    * @slot插槽：
    * @label                           自定义复选框内容 参数 props
    * @checkbox                        自定义复选框
** -->
<template>
  <a-checkbox-group class="YfnCheckbox" ref="YfnCheckbox">
    <template v-for="(item, i) in setOptions(props.options)" :key="i">
      <a-checkbox v-if="item.visible" v-bind="item">
        {{ item.label }}
        <!-- 插槽 -->
        <template v-if="slots.label" #default>
          <slot name="label" :props="{ ...item, $index: i }"></slot>
        </template>
        <template v-if="slots.checkbox" #checkbox>
          <slot name="checkbox" :props="{ ...item, $index: i }"></slot>
        </template>
      </a-checkbox>
    </template>
  </a-checkbox-group>
</template>

<script lang="ts" setup>
  import { defineProps, useSlots, getCurrentInstance } from 'vue'
  /* props */
  const props = defineProps({
    options: Array,
    optionsKey: Object,
  })
  /* proxy */
  const { proxy } = getCurrentInstance() as any
  /* emit */
  const emit = defineEmits(['get-instance'])
  /* slots */
  const slots = useSlots()
  /* fn */
  const setOptions = (arr: any = []) => {
    const options = arr.map((p: any) => {
      return { visible: true, ...keyTo(p, props.optionsKey) }
    })
    return options
  }
  // 实例
  const setInstance = () => {
    emit('get-instance', proxy)
  }
  setInstance()
  // 键值转换
  const keyTo = (value: any = [], keyValue: any = {}) => {
    let obj = { ...value }
    Object.keys(keyValue || {}).forEach((key) => {
      obj[key] ?? (obj[key] = obj[keyValue[key]])
    })
    return obj
  }
</script>

<style scoped lang="less"></style>
